<template>
  <div>
    <el-card>
      <div slot="header">
        <span><b>弹窗广告</b></span>
        <el-button-group class="base-el-float-right">
          <el-button type="primary" @click="popupAdDialogVisible = true">更新</el-button>
          <el-button type="danger" @click="doPopupEdit('delete')">删除</el-button>
        </el-button-group>
      </div>
      <div>
        <el-col :span="12">
          <el-image v-if="popupAd !==''" :preview-src-list="[popupAd]" :src="popupAd" style="width: 225px; height: 400px" />
          <p v-else>暂无弹窗图片</p>
        </el-col>
        <el-col :span="12">
          <p>{{ popupLink || '暂无跳转链接' }}</p>
        </el-col>
      </div>

      <el-dialog
        title="上传广告弹窗"
        :visible="popupAdDialogVisible"
        :close-on-click-modal="false"
        @close="popupAdDialogVisible = false"
      >
        <MutilUpload v-model="popupAd" :limit="1" :size="10" />
        <span>跳转链接: </span>
        <el-input v-model="popupLink" />
        <div slot="footer">
          <el-button @click="popupAdDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="doPopupEdit">确定</el-button>
        </div>
      </el-dialog>
    </el-card>

    <el-card>
      <div slot="header">
        <span><b>轮播广告</b></span>
        <el-button class="base-el-float-right" type="primary" icon="el-icon-plus" @click="handleBannerEdit()">新增</el-button>
      </div>
      <PaginationTable :show-pagination="false" :table-data="bannerData">
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-image style="width: 200px" :src="scope.row.image" :preview-src-list="[scope.row.image]" />
          </template>
        </el-table-column>
        <el-table-column label="跳转链接" prop="path" />
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-link type="primary" class="mr20" @click="handleBannerEdit(scope.row.id)">编辑</el-link>
            <el-link type="danger" style="margin-right: 20px" @click="delBanner(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </PaginationTable>
      <el-dialog
        title="新增轮播图"
        :visible="bannerDialogVisible"
        :show-close="true"
        :close-on-click-modal="false"
        @close="bannerDialogVisible = false"
      >
        <MutilUpload v-model="bannerForm.image" :limit="1" :size="10" />
        跳转链接:<el-input v-model="bannerForm.path" />
        <div slot="footer">
          <el-button @click="bannerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="doBannerEdit">确认</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import PaginationTable from '@/components/PaginationTable'
import MutilUpload from '@/components/MutilUpload'
import { queryByCondition, updateById } from '@/api/commoncrud'
import { deleteBanner, updateBanner, addBanner } from '@/api/need'
export default {
  name: 'Extension',
  components: {
    PaginationTable,
    MutilUpload
  },
  data() {
    return {
      areaId: '',
      extensionData: {},
      popupAd: '',
      popupLink: '',
      bannerData: [],
      bannerForm: { image: '', path: '' },
      bannerDialogVisible: false,
      popupAdDialogVisible: false
    }
  },
  async created() {
    this.areaId = this.$route.query.areaId
    await this.fetchAreaExtensionData()
  },
  methods: {
    async fetchAreaExtensionData() {
      const res = await queryByCondition('areaextension', 0, 1, { areaId: this.areaId })
      const data = res.data.documentList[0]
      this.extensionData = data
      this.popupAd = data.popupAd || ''
      this.popupLink = data.popupLink || ''
      this.bannerData = data.banner
    },
    async doPopupEdit(flag) {
      if (flag === 'delete') {
        this.$alert('确认删除', '消息提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showCancelButton: true,
          callback: async action => {
            if (action === 'confirm') {
              await updateById('areaextension', this.extensionData._id, { popupAd: '', popupLink: '' })
              this.popupAd = ''
              this.popupLink = ''
              await this.fetchAreaExtensionData()
            }
          }
        })
      } else {
        if (this.popupAd === '') {
          this.$message.info('请等待文件上传完毕')
          return
        }
        await updateById('areaextension', this.extensionData._id, { popupAd: this.popupAd, popupLink: this.popupLink })
        this.popupAdDialogVisible = false
      }
      this.$message.success('操作成功!')
      await this.fetchAreaExtensionData()
    },

    handleBannerEdit(id) {
      if (id) {
        for (const item of this.bannerData) {
          if (item.id === id) {
            this.bannerForm = {
              image: item.image, path: item.path, id: item.id
            }
          }
        }
      } else {
        this.bannerForm = {}
      }
      this.bannerDialogVisible = true
    },

    delBanner(id) {
      this.$alert('确认删除', '消息提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showCancelButton: true,
        callback: async action => {
          if (action === 'confirm') {
            await deleteBanner(this.areaId, id)
            await this.fetchAreaExtensionData()
          }
        }
      })
    },

    async doBannerEdit() {
      if (this.bannerForm.image === '') {
        this.$message.info('请等待文件上传完毕')
        return
      }
      if (this.bannerForm.id) {
        await updateBanner(this.areaId, { id: this.bannerForm.id, image: this.bannerForm.image, path: this.bannerForm.path })
      } else {
        await addBanner(this.areaId, { image: this.bannerForm.image, path: this.bannerForm.path })
      }
      this.bannerDialogVisible = false
      this.bannerForm = {}
      await this.fetchAreaExtensionData()
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-edit{
  margin-left: 20px;
}
</style>
